<template>
  <div class="medicine_type_search">
    <!-- 药品类别条件搜索表单 -->
    <el-form :model="medicineType">
      <el-row class="search_condition_row1">
        <!-- 药品类别 -->
        <el-col :span="6">
          <el-input placeholder="请输入药品类别名称" v-model="medicineType.type" clearable>
            <template slot="prepend">药品类别</template>
          </el-input>
        </el-col>
        <!-- 药品等级 -->
        <el-col :span="5">
          <el-select clearable placeholder="请选择药品等级" v-model="medicineType.level">
              <el-option key="一级" label="一级" value="一级"></el-option>
              <el-option key="二级" label="二级" value="二级"></el-option>
              <el-option key="三级" label="三级" value="三级"></el-option>
              <el-option key="四级" label="四级" value="四级"></el-option>
              <el-option key="五级" label="五级" value="五级"></el-option>
          </el-select>
        </el-col>
        <!-- 搜索药品类别按钮 -->
        <el-col :span="5" :offset="1">
          <el-button type="primary" icon="el-icon-search" @click="searchMedicineType">搜索药品类别</el-button>
        </el-col>
      </el-row>
    </el-form>
  </div>
</template>

<script>
  export default {
    name: 'MedicineTypeSearch',
    data() {
      return {
        /* 药品类别信息 */
        medicineType: {
          type: '',
          level: '',
        },
      }
    },
    methods: {
      /* 搜索药品类别事件 */
      searchMedicineType() {
        this.$bus.$emit('getMedicineTypePageList',this.medicineType)
        this.$bus.$emit('getMedicineTypeTotal')
      }
    }
  }

</script>

<style scoped>
  /* 搜索药品类别表单 */
  .el-form {
    padding: 20px 20px;
  }

  .search_condition_row1 {
    margin-bottom: 20px;
  }

  .description {
    width: 400px;
  }

  .el-input {
    width: 270px;
  }
</style>